<template>
    <div class="login_bg">
        <!-- <div class="help-doc"> <a href="/docs" target="_blank">帮助文档</a></div> -->
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="80px"
                 class="demo-ruleForm login-container">

            <div class="login_body">
                <h3 class="title_login">教育部科研实验室安全检查系统 </h3>
               
                <div class="login">

                    <el-form-item label="账号" prop="account">
                        <el-input type="text" v-model="ruleForm2.account" auto-complete="off"
                                  placeholder="账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"
                                  placeholder="密码"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="验证码" prop="verify_code">
                        <div class="code_container">
                            <div class="code_wrap">
                                <el-button v-if="count_down=== 0" type="text" @click="getVerifyCode">获取验证码</el-button>
                                <span v-else>{{count_down}}秒重新获取</span>
                            </div>
                            <el-input type="text" v-model="ruleForm2.verify_code" auto-complete="off" placeholder="手机验证码"></el-input>
                        </div>
                    </el-form-item>-->
                    <!--   <el-form-item style="margin-bottom:0">
                       <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
                       </el-form-item>-->
                    <el-form-item>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2"
                                   :loading="logining">登录
                        </el-button>
                        <el-button type="text"  style="margin-top:30px; float:right" @click="signDialogVisible = true" >注册申请</el-button>
                        <el-button type="text"  style="margin-top:30px; margin-left:0; float:left" @click="restPassword">忘记密码？</el-button>
                        <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
                    </el-form-item>

                </div>

            </div>


 


        </el-form>

        <el-dialog
            :visible.sync="signDialogVisible"
            fullscreen
            v-loading="logining"
            custom-class="sign-dialog"
            center>
            <div class="sign-box">
                <div class="sign-center">
                    <div class="sign-left"/>
                    <div class="sign-right">
                        <ul class="tab-title">
                            <li :class="signFormData.type == 1 ? 'active' : ''" @click="switchSignType(1)">高校</li>
                            <li :class="signFormData.type == 2 ? 'active' : ''" @click="switchSignType(2)">教育主管部门</li>
                        </ul>
                        <!-- 教育主管部门 -->
                        <el-form
                            :inline="true"
                            :model="signFormData"
                            label-position="top"
                            class="demo-form-inline"
                            :rules="ruleFormSign"
                            ref="univForm"
                        >
                            <div v-if="signFormData.type == 2">
                                <el-form-item label="教育主管部门名称"  prop="apply_name" style="width:80%;">
                                    <el-input v-model="signFormData.apply_name" placeholder="请输入教育主管部门名称"></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item prop="provinces" label="所在省市">
                                    <!--<el-select
                                            placeholder="所在省份" v-model="signFormData.provinces" size="18px">
                                        <el-option :key="item" :label="item" :value="item"
                                                   v-for="item in dict.provinces"></el-option>
                                    </el-select>-->
                                    <el-cascader
                                            placeholder="请选择所在省市"
                                            v-model="selecetProvincCity"
                                            :options="dict.provinc_city"
                                            :props="provincCityProps"
                                            @change="provincCityChange"></el-cascader>
                                    </el-select>
                                </el-form-item>
                                <br>
                            </div>
                            <div v-else>
                                <el-form-item label="高校名称"  prop="apply_name">
                                    <el-input v-model="signFormData.apply_name" placeholder="请输入高校名称"></el-input>
                                </el-form-item>
                                <el-form-item prop="arts_type" label="高校类型">
                                    <el-select
                                            placeholder="请选择高校类型" v-model="signFormData.arts_type" size="12px">
                                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                                   v-for="item in dict.univ_pro"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="belong"  label="高校所属">
                                    <el-select
                                            placeholder="请选择高校所属" v-model="signFormData.belong" size="12px">
                                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                                   v-for="item in dict.univ_department"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="provinces" label="所在省市">
                                    <!--<el-select
                                            placeholder="所在省份" v-model="signFormData.provinces" size="18px">
                                        <el-option :key="item" :label="item" :value="item"
                                                   v-for="item in dict.provinces"></el-option>-->
                                    <el-cascader
                                            placeholder="请选择所在省市"
                                            v-model="selecetProvincCity"
                                            :options="dict.provinc_city"
                                            :props="provincCityProps"
                                            @change="provincCityChange"></el-cascader>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="其他部委名称"  prop="other_belong" v-if="signFormData.belong == 4">
                                    <el-input v-model="signFormData.other_belong" placeholder="请输入其他部委名称"></el-input>
                                </el-form-item>
                            </div>
                            <br>
                            <el-form-item label="姓名"  prop="full_name">
                                <el-input v-model="signFormData.full_name" placeholder="请输入您的姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="所属部门"  prop="belong_unit">
                                <el-input v-model="signFormData.belong_unit" placeholder="请输入您所属部门"></el-input>
                            </el-form-item>
                            <el-form-item label="职务"  prop="title">
                                <el-input v-model="signFormData.title" placeholder="请输入您的职务"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码"  prop="telephone">
                                <el-input v-model="signFormData.telephone" placeholder="请输入您的手机号码"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱"  prop="email">
                                <el-input v-model="signFormData.email" placeholder="请输入您的邮箱"></el-input>
                            </el-form-item>
                            <el-form-item label="登录密码"  prop="password">
                                <el-input  show-password v-model="signFormData.password" placeholder="请输入您的登录密码"></el-input>
                            </el-form-item>
                            <br>
                            <div class="sign-submit-btn">
                                <el-button  type="danger" round @click="submitSign">提交申请</el-button>
                                <br>
                                <el-button type="text"  style="margin-top:30px; float:right" @click="signDialogVisible = false">已有账号？登录</el-button>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import * as API from "../api/auth_api"
    import {requestLogin, verifyCode, newsList , unitSingUp} from '../api/api';
    import * as auth_api from '../api/auth_api';
    import dict from '../common/js/dict';
    //import NProgress from 'nprogress'
    export default {

        data() {
            var validEmail = (rule,value,callback) => {
                let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
                if(!reg.test(value)){
                    callback(new Error("请输入正确邮箱格式"));
                }else{
                    callback();
                }
            }
            var validTelephone = (rule, value, callback) => {
                let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                }
            }

            var validPassword = (rule,value,callback) => {
                if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value)){
                    callback(new Error("密码要求长度6-20位的字母与数字组合"));
                }else{
                    callback();
                }
            }
            return {
                dict:dict,
                provincCityProps:{
                    value:'name',
                    label:'name',
                    children:'city'
                },
                selecetProvincCity:[],
                base_url: "",
                logining: false,
                signDialogVisible: false,
                ruleForm2: {
                    account: '',
                    checkPass: '',
                    verify_code: ''
                },
                count_down: 0,
                signFormData: {
                    password:'', //密码
                    other_belong :'', //其他部委
                    city:'', //城市
                    type:1, // 1 高校，2教育主管部门
                    apply_name:'', // 高校名称或教育主管部门名称
                    provinces:'', // 地域
                    belong:'', // 所属
                    arts_type:'', // 文理分类
                    full_name:'', // 申请人
                    telephone:'', // 电话
                    email:'',      // 邮箱
                    belong_unit:'',// 所属部门
                    title:''    // 职务
                },
                news: [],
                rules2: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        //{ validator: validaePass }
                    ],
                    checkPass: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        //{ validator: validaePass2 }
                    ],
                    verify_code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                },
                ruleFormSign: {
                    belong_unit: [
                        {required: true, message: '所属部门为必填项', trigger: 'blur'},
                        {min: 0, max: 20, message: '不超过20个字符', trigger: 'change'}
                    ],
                    email: [
                        {required: true, message: '邮箱为必填项', trigger: 'blur'},
                        {min: 0, max: 30, message: '不超过30个字符', trigger: 'change'},
                        {validator: validEmail, trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '手机号码为必填项', trigger: 'blur'},
                        {validator: validTelephone, trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '职务为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    full_name: [
                        {required: true, message: '姓名为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    other_belong: [
                        {required: true, message: '其他部委为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '密码为必填项', trigger: 'blur'},
                        {validator: validPassword, trigger: 'blur'}
                    ],
                    apply_name: [
                        {required: true, message: '名称为必填项', trigger: 'blur'},,
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    provinces: [
                        {required: true, message: '所在省市为必选项', trigger: 'change'},
                    ],
                    belong: [
                        {required: true, message: '高校所属为必选项', trigger: 'change'},
                    ],
                    arts_type: [
                        {required: true, message: '高校类型为必选项', trigger: 'change'},
                    ]
                },
                timer: null,
                checked: true
            };
        },
        computed: {
            role_url() {
                let role_name = this.$store.state.userInfo.role_name || ''

                let roleUrl = '/index'

                //0：管理员，1：专家，2高校
                // if (role_name.indexOf("管理员") > -1 || role_name.indexOf("教育部") > -1) {
                //     roleUrl = '/manage/reports/list'
                // } else if (role_name.indexOf("高校") > -1) {
                //     roleUrl = "/university/info"
                // } else if (role_name.indexOf("专家") > -1) {
                //     roleUrl = "/records/list"
                // }
                return roleUrl
            },
        },
        methods: {
            getBaseURL() {
                auth_api.getResourceUrl().then(res => {
                    this.base_url = res.data.datas
                })
            },
            getNewsList() {
                let params = {
                    "page_size": 6, "page_current": 1,
                    condition: {"show_status": 1}
                }
                newsList(params).then((res) => {

                    this.news = JSON.parse(res.datas).items
                    if(this.news.length > 5)
                        this.news = this.news.splice(0,4)
                })
            },
            handleReset2() {
                this.$refs.ruleForm2.resetFields();
            },
            countDown() {

                this.timer && clearInterval(this.timer)
                if (this.count_down === 0) {
                    return false
                }
                this.count_down--
                this.timer = setInterval(() => {
                    this.countDown()
                }, 1000)
            },
            getVerifyCode() {
                this.rules2.verify_code[0].required = false
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        //_this.$router.replace('/table');
                        // this.logining = true;
                        //NProgress.start();

                        var loginParams = {
                                user_name: this.ruleForm2.account,
                                password: this.ruleForm2.checkPass
                            }
                        ;

                        verifyCode(loginParams).then(data => {
                            // this.logining = false;
                            //NProgress.done();

                            this.rules2.verify_code[0].required = true
                            let {msg, status, datas} = data;
                            if (status !== 200) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                this.$message({
                                    message: "手机验证码发送成功，请查收",
                                    type: 'success'
                                });
                                this.count_down = 60
                                this.countDown()
                            }
                        });
                    } else {

                        return false;
                    }
                });

            },
            goto() {
                this.$router.push({path: this.role_url});
            },
            restPassword() {
                this.$router.push({path:'/reset_pwd'});
                console.log(1234)
            },
            handleSubmit2(ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        //_this.$router.replace('/table');
                        this.logining = true;
                        //NProgress.start();

                        var loginParams = {
                            user_name: this.ruleForm2.account.trim(),
                            password: this.ruleForm2.checkPass.trim(),
                            // verify_code:this.ruleForm2.verify_code
                        };

                        requestLogin(loginParams).then(data => {
                            this.logining = false;
                            //NProgress.done();


                            let {msg, status, datas} = data;
                            if (status !== 200) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                let token = JSON.parse(datas).token;

                                this.$store.dispatch("set_token", {token}).then(() => {

                                    return this.$store.dispatch("setting_Sync", {token})
                                }).then((res) => {
                                    if (res.data.status == 200) {
                                        let datas = JSON.parse(res.data.datas)
                                        if (datas.resources.length > 0) {

                                            this.goto()
                                        } else {
                                            this.$message(res.data.msg || "无后台权限 ");
                                        }

                                    } else {
                                        this.$message(res.data.msg);
                                    }
                                })

                                /*  var user = this.$store.getters.getUserInfo;
                                  console.log("user",user)
                                  params.user_id = user.id
                                  params.user_name = user.user.user_name
                                  params.nickname = user.user.nickname

                                  let params = {
                                      "operation":dict.operation.login.label,
                                      "type":dict.operation.login.type

                                  }

                                  auth_api.setLogOperation(params).then(res =>{
                                      console.log(res)
                                  })
                              */

                            }
                        });
                    } else {

                        return false;
                    }
                });
            },
            switchSignType(type){
                this.signFormData.type = type
                this.$refs['univForm'].resetFields()
                this.selecetProvincCity = []
            },
            provincCityChange(val){
                this.signFormData.provinces = val[0]
                this.signFormData.city = val[1]
            },
            submitSign(){
                this.$refs['univForm'].validate((valid) => {
                    if (valid) {
                        this.logining = true;
                        unitSingUp(this.signFormData).then(res => {
                            if(res.status == 200){
                                this.logining = false
                                this.signDialogVisible = false
                                this.$confirm('感谢您的申请，审核通过后，我们的工作人员会与您联系。', '提交成功', {
                                    confirmButtonText: '确定',
                                    type: 'success',
                                    center: true
                                })
                            }else{
                                this.$message(res.data.msg || '提交失败，请稍后再试');
                            }
                        })
                    }
                })
            }
        },
        created: function () {
            this.getNewsList()
            var _this = this;
            window.onkeydown = function (e) {

                if (e.keyCode == 13) {
                    _this.handleSubmit2()
                }

            }
        }
    }

</script>

<style>
    body {
        background: #333
    }

    .login-container .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #ff5353;
        border: #ff5353;
    }

    .login-container .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #ff5353 !important;
    }
.sign-dialog .el-dialog__body {
    padding:0;
}
.sign-dialog .el-dialog__header {
    display:none;
}
.sign-dialog .el-form--label-top .el-form-item__label {
    padding-bottom:0;
    line-height: 32px;
}
</style>
<style lang="scss" scoped>
.doc{
    width:90%;
    background:dodgerblue;
    color:#fff;
    display:inline-block;
    padding:8px 10px;
    font-size:16px;
    border-radius: 10px;;
}
.el-col-6{
    text-align:center
}
    .help-doc{
        position:absolute;
        top:20px;
        right:30px;
        a{
           font-size:16px;
            &:hover{
                color:#fff;
            }
        }
    }

    .code_container {
        position: relative;
        .code_wrap {
            position: absolute;
            right: 0;
            top: 1px;
            z-index: 1;
            span {
                padding: 0 20px;
                color: #aaa;
            }
        }
    }

    .title_login i {
        font-size: 10px;
        color: #333;
        font-style: normal
    }

    .login_bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: url("/assets/images/bg_ding.jpg") center;
        background-size: cover;
    }

    .login-container {

        .login_body {
            font-size: 20px;
            -webkit-border-radius: 8px;
            border-radius: 8px;
            -moz-border-radius: 8px;
            background-clip: padding-box;
            padding: 40px 66px 50px;
            background: rgba(255, 255, 255, 1);
            overflow: hidden;
            .news {
                width: 400px;
                float: left;
                color: #666;
                ul {
                    padding: 0;
                    margin: 10px 0
                }
                margin-right: 80px;
                h3 {
                    margin: 0;
                    font-weight: 100;
                    font-size: 18px
                }
                li {
                    list-style: none;
                    position: relative;
                    margin: 0;
                    padding: 5px 0;
                    border-bottom: 1px solid #ddd
                }
                p {
                    margin: 5px 0
                }
                .title {
                    font-size: 16px;
                }
                .date {
                    font-size: 14px;
                }
                .icon {
                    position: absolute;
                    right: 0;
                    top: 20px;
                }
            }
            .login {
                
                width: 360px;
                min-height: 200px;
                margin:0 auto;
            }

        }
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        /* -webkit-border-radius: 8px;
         border-radius: 8px;
         -moz-border-radius: 8px;
         background-clip: padding-box;
         width: 260px;
         padding: 35px 35px 15px;
         background: #fff;
         border: 1px solid #eaeaea;*/

        position: absolute;
        top: 50%;
        margin: -280px 0 0 -280px;
        left: 50%;
        z-index: 5;
        // box-shadow: 0 0 25px #cac6c6;
        .title_login {
            margin: 0px auto 60px auto;
            text-align: center;
            font-size: 36px;
            color: #333;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }

        .el-button--primary {
            background: #ff5353;
            border: #ff5353;
            font-size: 18px;
            height: 40px
        }
    }
    .sign-box{
        background: url('../assets/images/bg_register.png') no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100%;
        display: table;
        .sign-center{
            width:1045px;
            height:auto;
            margin:100px auto;
            display: table;
            >div{
                float: left;
            }
            .sign-left{
                width:505px;
                height:622px;
                margin-top:64px;
                background:url('../assets/images/img_register_left.png')
            }
            .sign-right{
                width:540px;
                min-height:750px;
                background:#fff;
                border-radius:10px;
                padding:40px;
                box-sizing: border-box;
                text-align: left;
                .tab-title{
                    margin:50px 0 30px;
                    padding:0;
                    li{
                        list-style: none;
                        display:inline-table;
                        font-size:22px;
                        color:#666;
                        margin-right:40px;
                        line-height:36px;
                        cursor: pointer;
                        &.active{
                            color:#333;
                            border-bottom:3px solid #333;
                        }
                    }
                }
                .sign-submit-btn{
                    text-align: center;
                    .el-button{
                        min-width:200px;
                    }
                }
            }
        }

    }

</style>
